<template>
  <div class="main-menu">
    <!-- logo -->
    <div class="flex items-center justify-center">
      <img src="@/assets/wu-nai.svg" class="h-56px w-56px" alt="logo" @click="() => router.push('/home')">
    </div>
    <!-- 使用递归组件渲染菜单 -->
    <Menu mode="inline" :selected-keys="currentPages" style=" background: none;border: none;">
      <template v-for="item in menuList" :key="item.path">
        <MenuItem v-if="!item.children" :key="item.path">
          <li class="vertical-center" @click.stop="jumpPage(item)">
            <IconFont :type="item.icon" style="font-size: 20px;" />
            <span>{{ item.menuName }}</span>
          </li>
        </MenuItem>
        <SubMenu v-else :key="item.id">
          <template #title>
            <li>
              <IconFont :type="item.icon" style="font-size: 16px;" />
              <span>{{ item.menuName }}</span>
            </li>
          </template>
          <template v-for="subItem in item.children" :key="subItem.path">
            <MenuItem>
              <li class="vertical-center" @click.stop="jumpPage(subItem)">
                <IconFont :type="subItem.icon" style="font-size: 16px;" />
                <span>{{ subItem.menuName }}</span>
              </li>
            </MenuItem>
          </template>
        </SubMenu>
      </template>
    </Menu>
  </div>
</template>

<script lang="ts" setup>
import IconFont from '@/components/IconFont/index.vue'
import useMenuTreeStore from '@/store/menuTree'

import { Menu, MenuItem, SubMenu } from 'ant-design-vue'

const menuList = useMenuTreeStore().getMenuList()

// 页面跳转
const router = useRouter()
const route = useRoute()

const currentPages = computed(() => {
  return [route.path]
})

function jumpPage(menu: any) {
  if (menu.isFrame === 1) {
    window.open(menu.path)
  }
  else {
    router.push(menu.path)
  }
}
</script>

<style lang="less" scoped>
.main-menu {
  width: 100%;
  height: 100%;
  background: #f0f4ff;
  border-right: 1px solid #e5e6eb;
}
</style>
